<template>
	<view>
		<!-- 顶部 -->
		<view class="top-view">
			<view>{{count_renshu}}人就餐</view>
			<view class="top-view-flex">
				<image src="/static/tab/fenxiang.svg" mode="widthFix" class="top-search"></image>
				<image src="/static/tab/dingdan.svg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 点餐界面 -->
		<view class="order-view">
			<view class="commodity">
				<!-- 左 -->
				<view class="order-left">
					<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
						:show-scrollbar="false">
						<block v-for="(item,index) in itemize" :key="index">
							<view class="itemize-text" :class="{active: index == trigger}"
								@click="trigger_qiehuan(index,item.cid)">
								<text>{{item.name}}</text>
								<text v-if="item.sele_quantity !== 0">{{item.sele_quantity}}</text>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- 右 -->
				<view class="order-right">
					<!-- scroll-into-view 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 @scrolltolower="tolower"-->
					<scroll-view scroll-y="true" class="scroll-Hei" :scroll-with-animation="true" :enhanced="true"
						:show-scrollbar="false" :scroll-into-view="scroll_into" @scroll="scroLl">
						<!-- 循环 -->
						<block v-for="(item,index) in goods" :key="index">
							<!-- 获取元素的高度 -->
							<view :id="item.cid" class="rig-height">
								<view class="classif">{{item.name}}</view>
								<view class="classif-goods" v-for="(good_item,good_index) in item.goods"
									:key="good_index" @click="popup_item(index,good_index,good_item)">
									<view class="goods-image">
										<image :src="good_item.image[0].url" mode="aspectFill"></image>
									</view>
									<view class="goods-Price">
										<view class="goods-name">
											<text class="Bold">{{good_item.name}}</text>
											<text class="Thinning">已售 {{good_item.monthlysale}}</text>
										</view>
										<view class="unit-price">
											<text class="Symbol">¥</text>
											<text class="Bold">{{good_item.unitprice}}</text>
											<text class="Thinning">/{{good_item.unit}}</text>
										</view>
									</view>
									<view class="quantity">
										<!--  @click.stop 阻止冒泡 -->
										<view @click.stop="reduce(index,good_index,good_item)"
											v-if="good_item.quantity > 0">
											<image src="/static/tab/jianhao.png" mode="widthFix"></image>
										</view>
										<view><text v-if="good_item.quantity > 0">{{good_item.quantity}}</text></view>
										<!--  @click.stop 阻止冒泡 -->
										<view @click.stop="plus(index, good_index, good_item)">
											<image src="/static/tab/jia.png" mode="widthFix"></image>
										</view>
									</view>
								</view>
							</view>
						</block>
						<view style="height: 400rpx;"></view>
					</scroll-view>
				</view>
			</view>
			<!-- 底部 :style="{'padding-bottom': Modelmes ? '68rpx' : ''}"-->
			<view class="order-bottom" @click="pop_Shopping()">
				<view class="Shopping" style="width: 115rpx;">
					<view class="Shopping-left">
						<image src="/static/tab/gouwuche.png" mode="widthFix"></image>
					</view>
					<view class="Shopping-number" v-if="total_quantity != 0">{{total_quantity}}</view>
				</view>
				<view class="Shopping-title" v-if="total_quantity != 0">已点{{total_quantity}}份菜品</view>
				<!-- 判断为空点击无用 -->
				<view class="place-order" @click.stop="total_quantity == 0 ? false : true && placean_order()">
					<button plain="false" open-type="getUserInfo">选好了</button>
				</view>
			</view>
		</view>
		<!-- 单个商品详情 -->
		<Details v-if="popupitem" :pro_details="pro_details" @seed_plus="seed_plus" />
		<!-- 购物车 -->
		<Cart v-if="card" :shopping_card="shopping_card" />
	</view>
</template>

<script>
	const db = wx.cloud.database() // 云开发添加数据
	const _ = db.command // 
	// 单个商品详情
	import Details from './components/goods-details.vue'
	// 购物车
	import Cart from './components/shopping-cart.vue'
	export default {
		components: {
			Details,
			Cart
		},
		data() {
			return {
				count_renshu: 0, // 用餐人数
				trigger: 0, // 触发 类目选中的值
				goods: [], // 所有的菜品
				itemize: [], // 左边类目
				heightset: [], //存储右边每一个分类菜品的高度
				tophei: 0, //滚动时距离顶部的高度
				card: false, //购物车隐藏与显示
				shopping_card: [], //购物车里的数据
				pro_details: {}, //单个商品弹出框里的数据
				scroll_into: '', //点击指示到谁
				popupitem: false, //单个商品隐藏与否
				tmplIds: 'EEFKNccJ6PGDVx8fa7Nu7YUVj1MoxmybLP0qJ5ZwOXA', // 小程序订阅消息模板id 公众号获取
			}
		},
		methods: {
			// 点击左边类目加上背景色
			trigger_qiehuan(index, cid) {
				this.trigger = index
				this.scroll_into = cid
				// setTimeout(() => {
				// 	this.scroll_into = ''
				// }, 200)
			},
			// 请求数据
			dishEs() {
				//菜品所有数据
				db.collection('dishes-data').get()
					.then(res => {
						let array = []; // 菜品数据
						let itemize = []; // 菜品类目
						let arr = [] // 菜品信息
						let cid = [] // 类目id
						// 取出类别 和 cid 
						res.data.map(item => {
							arr.push(item.category)
							cid.push(item.cid)
						})
						// 1.数组去重,返回新的数值
						// 利用Map的键值对同名覆盖，再将Map转数组
						// let m = new Map();
						// for (let i = 0; i < arr.length; i++) {
						// 	m.set(arr[i], arr[i]);
						// }
						// 1.数组cid唯一标识去重,返回新的数值
						cid = Array.from(new Set(cid))
						// 2.数组类别去重,返回新的数值
						arr = Array.from(new Set(arr))
						// 结构
						arr.forEach(function(value, index) {
							// 右边 goods 数据 
							array.push({
								name: value,
								cid: cid[index],
								goods: []
							})
							// 左边 类目 数据
							itemize.push({
								name: value,
								cid: cid[index],
								sele_quantity: 0,
							})
						})
						// 类目下的详细信息
						res.data.map(item => {
							for (let i = 0; i < array.length; i++) {
								// 判断有数据的类目进行添加
								if (item.category == array[i].name) {
									array[i].goods.push(item)
								}
							}
						})
						this.goods = array // 所有右边菜品数据
						this.itemize = itemize // 左边数据
					})
					.catch(err => {
						// 微信小程序失败弹窗
						wx.showToast({
							title: '菜品获取失败！',
							// mask: true, // 图层透明蒙版，防止点击
							icon: 'error',
							duration: 2000
						})
					})
			},
			// 右边菜品滚动时触发
			scroLl(e) {
				let scrollTop = e.detail.scrollTop //上下滑动距离高度的数据
				// 第一次启动分类菜品的高度
				if (this.heightset.length == 0) {
					this.dishesHighly()
				}
				// 判断上拉还是下拉
				if (scrollTop >= this.tophei) { //上拉
					// 当前分类商品的高度小于滚动高度时跳转下一个分类
					if (scrollTop >= this.heightset[this.trigger]) {
						// 类目id
						this.trigger += 1
					}
				} else { //下拉
					// 当前分类商品的高度大于滚动高度时跳转下一个分类
					if (scrollTop < this.heightset[this.trigger - 1]) {
						this.trigger -= 1
					}
				}
				this.tophei = scrollTop
			},
			// 计算右边每个分类菜品的高度
			dishesHighly() {
				// 每个商品的高度 且每次数据清除获取新数据
				let heightset = this.heightset = []
				// // 临时变量,存储商品相加高度
				let cate_height = 0
				// 微信小程序节点获取
				const query = wx.createSelectorQuery()
				// selectAll 所有这个节点的坐标
				query.selectAll('.rig-height').boundingClientRect(function(res) {
					res.map((item) => { // 遍历出来
						cate_height = item.height + cate_height // 相加赋值
						heightset.push(cate_height)
					})
					this.heightset = heightset
				}).exec() // exec() 代表所有的
			},
			// 父组件 单个商品+ 
			plus(index, good_index, good_item, Men = '父组件') {
				const QU = good_item.quantity + 1
				if (Men == '子组件') good_item.quantity = QU // 是否是子组件进行商品加减
				this.$set(this.goods[index].goods[good_index], 'quantity', QU) // 商品数据加减
				// 调用 添加进购物车的商品
				this.shopping_Cart({
					good_item,
					good_index
				})
			},
			// 单个商品 -
			reduce(index, good_index, good_item, Men = '父组件') {
				const {
					quantity
				} = good_item
				const QU = quantity - 1
				// 是否是子组件进行商品加减
				if (Men == '子组件') good_item.quantity = QU
				// 商品数据加减
				this.$set(this.goods[index].goods[good_index], 'quantity', QU)
				// 调用 添加进购物车的商品数据
				this.shopping_Cart({
					good_item,
					good_index
				})
				if (QU == 0) return this.shopping_card = [] // 当点餐数为零的时候清空
			},

			// 子组件——单个商品 购物车商品加减数量
			child_reduce_plus(index, QU, item) {
				// 购物车商品数量加减
				this.$set(this.shopping_card[index].good_item, 'quantity', QU)
				// this.$set(this.shopping_card[arguments[0]].good_item, 'quantity', arguments[1])
				// 根据_id唯一标识查询商品的数量做到商品加减同步
				const itemcid = this.goods.findIndex(good => good.cid == item.good_item.cid)
				// goods总数居商品加减同步
				this.$set(this.goods[itemcid].goods[item.good_index], 'quantity', QU)
				// 调用 计算左边各分类下添加了多少菜品
				this.qunint_goods()
			},

			// 添加进购物车的商品
			shopping_Cart(arr) {
				// 判断购物车是否有数据 无
				if (this.shopping_card.length == 0) {
					// 没有数据直接添加
					this.shopping_card.unshift(arr)
				} else {
					// 购物车有数据 且数据个数
					let index = this.shopping_card.length
					for (let i = 0; i < index; i++) {
						// 判断数据是否重复,删除旧数据 ,添加新数据
						if (this.shopping_card[i].good_item._id == arr.good_item._id) {
							this.shopping_card.splice(i, 1) // 删除
							i--;
							index--;
						}
					}
					this.shopping_card.unshift(arr)
				}
				// 调用 计算左边各分类下添加了多少菜品
				this.qunint_goods()
			},

			// 清空已点：被子组件调用
			empty_data() {
				// 清除购物车数据
				this.shopping_card = []
				// 清除左边显示个数
				this.itemize.forEach(item => {
					item.sele_quantity = 0
				})
				// 清除右边选择个数
				this.goods.forEach(item => {
					// 两层结构
					item.goods.forEach(Item => {
						Item.quantity = 0
					})
				})
				// this.qunint_goods() // 已联动,无需调用
				this.pop_Shopping()
			},
			// 显示购物车组件
			pop_Shopping() {
				this.card = !this.card
			},
			// 弹出或隐藏单个商品弹出框
			popup_item(index, good_index, good_item, goods) {
				this.popupitem = !this.popupitem
				// 商品位置和信息给子组件
				this.pro_details = {
					index,
					good_item,
					good_index,
				}
			},
			// 计算左边各分类下添加了多少菜品
			qunint_goods() {
				// console.log(this.shopping_card, '90');
				// 第一层循环类目
				for (let i = 0; i < this.itemize.length; i++) {
					let QU = 0 // 类目下的菜品数量
					// 第二层循环菜品添加
					for (let j = 0; j < this.shopping_card.length; j++) {
						// 判断类目和添加的菜品cid是否相同
						if (this.itemize[i].cid == this.shopping_card[j].good_item.cid) {
							// 不同菜品里面有相同cid进行quantity购物数量相加
							QU = this.shopping_card[j].good_item.quantity + QU
							// 所得的数据给类目进行显示
							this.itemize[i].sele_quantity = QU
						}
					}
				}
			},
			// 弹出订阅消息弹窗
			placean_order() {
				// 订阅消息弹窗
				wx.requestSubscribeMessage({
					tmplIds: [this.tmplIds],  // 模板id
					success: (res) => {
						console.log(res,'res');
						this.sub_database() // 调用提交订单
					},
					fail: (err) => {
						this.sub_database()  // 不管用户同不同意都可以提交订单，提高用户体验
					}
				})
			},
			// 提交订单 placean_order
			async sub_database() {
				wx.showLoading({
					title: '正在下单', 
					mask: true
				})
				// 计算所有商品的总价
				let sett_amount = 0
				// 去掉总价为0的购物车里的菜品;filter:过滤
				// 购物车加减商品数量为零的商品也会显示购物车上面，只不过看不见。所以要清除过滤,过滤会导致数组有unddfined,要去除
				let data_res = this.shopping_card.map(item => {
					if (item.good_item.quantity != 0) {
						sett_amount = item.good_item.unitprice * item.good_item.quantity + sett_amount
						return item.good_item
					}
				})
				//  过滤掉undefined空数组
				let res = data_res.filter(item => item !== undefined)
				// console.log(res, 'res');
				     // return false
				let Code = 'L' + this.$Time().utcOffset(8).format('YYYYMMDDHH') + sett_amount // 生成订单编号
				// 取出本地缓存的桌号和用餐人数
				let table_number = wx.getStorageSync('table_num')  // 桌号
				// let number_of_diners = wx.getStorageSync('count-renshu')  // 用餐人数count-renshu
				console.log(table_number,'取出本地缓存的桌号和用餐人数');
				// 提交的信息
				let order = {
					OrderNumber: 1, // 下单的次数
					table_number, // 桌号
					number_of_diners:this.count_renshu, // 用餐人数
					order_time: this.$Time().utcOffset(8).format('YYYY-MM-DD HH:mm:ss'), // 下单时间
					sett_amount, // 交易金额
					order_no: Code, // 订单编号
					transac_status: 'false', // 结帐状态: 未接单: 'false'接单: 'true'
					order_receiving: 'false', // 结单状态: 未结账: 'false;已结账:'true '
					menu: [{
						backup_data: '备用字段',
						goods_list: res
					}] // 下单的菜品: 第一次
				}
				let add_menu = {
					backup_data: '备用字段',
					goods_list: res
				} // 第二次加菜添加的新数据
				try {
					// 判断是否加菜 根据桌号和是否结账来判断是否加菜
					// 不加菜  table_number 桌号和 已结账 
					let query = await db.collection('dingdan-order').where({table_number,transac_status: 'false'}).get()
					if (query.data.length == 0) {
						await db.collection('dingdan-order').add({data: order })
					} else {
						//  加菜 未结账 相同桌号
						let total_amount = Number(query.data[0].sett_amount) + sett_amount // 交易金额
						let total_order = Number(query.data[0].OrderNumber) + 1 // 下单次数加一
						// 在小程序云开发给某一个数组添加一组数据
						await db.collection('dingdan-order').doc(query.data[0]._id).update({
							data: {
								sett_amount: total_amount, // 更新交易金额
								OrderNumber: total_order, // 更新订单下单次数
								order_receiving: 'false', // 结单状态: 未结账: 'false;已结账:'true '
								menu: _.unshift(add_menu) // 添加新的菜品
							}
						})
					}
					// 批量自增菜品售出数量
					res.forEach(async item =>{
						await db.collection('dishes-data').doc(item._id).update({data:{monthlysale:_.inc(item.quantity)}})
					})
					// 计算当天的销售额
					const time = this.$Time().utcOffset(8).format('YYYY-MM-DD') // 当天的时间，没有时分秒
					let query_time = await db.collection('sales-xiaoshoue').where({time}).get()  // 查询当天是否有数据
					if (query_time.data.length == 0) {
						await db.collection('sales-xiaoshoue').add({data:{time,sett_amount}})  // 没有数据添加数据 
					} else{
						let total_amount = Number(query_time.data[0].sett_amount) + sett_amount // 计算交易金额
						let final_data = parseFloat((total_amount).toFixed(10)) // toFixed 截取后10位  防止浮点数相加导致计算精度丢失
						// 有数据的情况下在对本条数据更改，更改金额
						await db.collection('sales-xiaoshoue').doc(query_time.data[0]._id).update({data:{sett_amount:final_data}})
					}
					console.log(query_time,'time');
					// 推送订单提醒
						// var pubsub = this.goeasy.pubsub;
						this.goeasy.pubsub.publish({
							channel: "my_channel", // 前后端的 channel 的一模一样
							message: "小程序端来的", //替换为您想要发送的消息内容
							onSuccess: () => {
								console.log("消息发布成功。");
							},
							onFailed: (error) => {
								console.log("消息发送失败，错误编码：" + error.code + " 错误信息：" + error.content);
							}
						});
						// 跳转页面
						wx.redirectTo({url:'/pages/order-details/details'})  // 前面一定要加斜杠
						// 关掉加载弹窗
						wx.hideLoading();
				} catch (e) {
					wx.showToast({
						title: '提交失败,',
						mask: true, // 图层透明蒙版，防止点击
						icon: 'error',
						duration: 2000,
					})
					console.log(e, 'e');
				}
				

			},

		
			// 我的订单
			// my_order() {
			// 	wx.navigateTo({
			// 		url: '/pages/my-order/my-order'
			// 	})
			// }
		},
		onLoad() {
			// 获取用餐人数 setStorageSync
			this.count_renshu = wx.getStorageSync('count-renshu')
			// 数据请求
			this.dishEs()
		},
		// 组件的计算属性
		computed: {
			// 计算购物车的菜品总数
			total_quantity() {
				let quantity = 0
				this.shopping_card.forEach(item => {
					quantity = item.good_item.quantity + quantity
				})
				return quantity
			}
		}
	}
</script>

<style scoped>
	.top-view {
		background: linear-gradient(to bottom, #f7d45f, #f7d562, #f8d561, #f9db76, #f9de80); // 
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
	}

	.top-view image {
		display: block;
		width: 35rpx;
		height: 35rpx;
	}

	.top-view-flex {
		display: flex;
		align-items: center;
	}

	.top-search {
		padding-right: 50rpx;
	}

	/* 点餐界面 */
	.order-view {
		margin-top: 120rpx;
	}

	.commodity {
		display: flex;
		position: fixed;
		top: 120rpx;
		left: 0;
		right: 0;
	}

	.order-left {
		background-color: #fafafa;
		width: 150rpx;
		overflow-y: auto;
	}

	.itemize-text {
		font-size: 27rpx;
		padding: 25rpx 10rpx;
		margin: 15rpx 0;
		display: flex;
		align-items: center;
		color: #797979;
		border-top-right-radius: 6px;
		border-bottom-right-radius: 6px;
	}

	.itemize-text text:nth-child(1) {
		flex: 1;
	}

	.itemize-text text:nth-child(2) {
		background-color: #eb5941;
		border-radius: 50%;
		font-size: 20rpx;
		color: #FFFFFF;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 2rpx;
	}

	.scroll-Hei {
		height: 100vh;
		/* white-space: nowrap; */
	}

	.order-right {
		background-color: #FFFFFF;
		flex: 1;
		overflow-y: auto;

	}

	.classif {
		font-size: 27rpx;
		padding: 30rpx 20rpx;
		color: #797979;
	}

	/* 分类商品 */
	.classif-goods {
		display: flex;
		justify-content: space-between;
		padding: 0 20rpx;
		height: 150rpx;
		font-size: 30rpx;
		margin-bottom: 45rpx;
	}

	.goods-image image {
		display: block;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.goods-Price {
		flex: 1;
		position: relative;
		padding: 0 20rpx;
	}

	.goods-Price text {
		display: block;
	}

	.goods-name {
		display: flex;
		flex-direction: column;
		position: relative;
		top: 0;
	}

	.goods-name text:nth-child(1) {
		padding-bottom: 9rpx;
	}

	.unit-price {
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: baseline;
	}

	.Bold {
		font-weight: bold;
	}

	.Symbol {
		font-size: 20rpx;
	}

	.Thinning {
		font-size: 25rpx;
		color: #cccccc;
	}

	.quantity image {
		width: 50rpx;
		height: 50rpx;
	}

	.quantity view {
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}

	.quantity {
		display: flex;
		align-items: center;
		align-self: flex-end;
		width: 200rpx;
		justify-content: space-between;
	}

	.order-bottom {
		background-color: #fefefe;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0rpx -1.9rpx 1rpx 1rpx #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		z-index: 9;
	}

	.Shopping image {
		width: 75rpx;
		height: 75rpx;
		display: block;
	}

	.Shopping-left {
		width: 75rpx;
		height: 75rpx;
	}

	.Shopping {
		display: flex;
		align-items: center;
		/* height: 120rpx; */
	}

	.Shopping-number {
		align-self: flex-start;
		background: #eb5941;
		color: #ffff;
		width: 40rpx;
		border-radius: 50rpx;
		text-align: center;
		font-size: 20rpx;
		/* margin-top: 15rpx; */
	}

	.Shopping-title {
		flex: 1;
		padding: 0 25rpx;
		color: #999999;
		/* height: 120rpx;
	line-height: 120rpx; */
	}

	.place-order button {
		border: none;
		background: linear-gradient(to right, #f8da81, #f8d771, #f7d362, #f6cb4a);
		width: 200rpx;
		height: 75rpx;
		line-height: 75rpx;
		border-radius: 50rpx;
		font-weight: bold;
		z-index: 9;
	}

	/* 点击分类列表加上背景色 */
	.active {
		background-color: #f7d34ac2;
		color: #000 !important;
	}
</style>